<template>
  <div id="app">
    <Layout style="height: 100%">
      <Sider ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed">
        <div class="header-bar-title">
          <img src="static/img/logo.png"/>
        </div>
        <Menu :active-name="currentMenuItem" theme="dark" width="auto" :class="menuitemClasses" @on-select="menuClick">
          <MenuItem name="1-1">
            <Icon type="ios-navigate"></Icon>
            <span>仪表盘</span>
          </MenuItem>
          <MenuItem name="1-2">
            <Icon type="person"></Icon>
            <span>个人中心</span>
          </MenuItem>
          <MenuItem name="1-3">
            <Icon type="document-text"></Icon>
            <span>文章管理</span>
          </MenuItem>
          <Submenu name="1-4">
            <template slot="title">
              <Icon type="pound"></Icon>
              分类管理
            </template>
            <MenuItem name="1-4-1">
              <Icon type="pricetags"></Icon>
              <span>小标签</span></MenuItem>
            <MenuItem name="1-4-2">
              <Icon type="ios-book"></Icon>
              <span>总分类</span>
            </MenuItem>
          </Submenu>

          <Submenu name="1-5">
            <template slot="title">
              <Icon type="pull-request"></Icon>
              文章发布
            </template>
            <MenuItem name="1-5-1">
              <Icon type="trash-b"></Icon>
              <span>草稿箱</span></MenuItem>
            <MenuItem name="1-5-2">
              <Icon type="edit"></Icon>
              <span>编辑器</span>
            </MenuItem>
          </Submenu>

          <MenuItem name="1-6">
            <Icon type="chatboxes"></Icon>
            <span>评论管理</span>
          </MenuItem>

          <MenuItem name="1-7">
            <Icon type="heart"></Icon>
            <span>主题管理</span>
          </MenuItem>

          <MenuItem name="1-8">
            <Icon type="ios-analytics" />
            <span>数据监控</span>
          </MenuItem>

          <MenuItem name="1-9">
            <Icon type="ios-settings" />
            <span>系统设置</span>
          </MenuItem>
        </Menu>
      </Sider>
      <Layout>

        <Header :style="{padding: 0}" class="layout-header-bar">
          <Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '20px 20px 0'}" type="navicon-round"
                size="24"></Icon>
          <h2 style="display: inline;color: #1c2438;">首页</h2>
          <div class="header-bar-my">
            <h4 style="color: #2d8cf0;display: inline-block;margin-right: 10px">Amaoblog Welcome</h4>
            <Button type="text" @click="logout">
              <Icon type="log-out"></Icon>
              退出登录
            </Button>
          </div>
        </Header>
        <Content :style="{margin: '10px', height: '100%'}">
          <transition name="slide-fade">
            <router-view @selectMenu="selectMenu"/>
          </transition>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        isCollapsed: false,
        currentMenuItem: '1-1'
      }
    },
    computed: {
      rotateIcon() {
        return [
          'menu-icon',
          this.isCollapsed ? 'rotate-icon' : ''
        ];
      },
      menuitemClasses() {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      }
    },
    methods: {
      collapsedSider() {
        this.$refs.side1.toggleCollapse();
      },
      menuClick(name) {
        if (name == null || name.length == 0) {
          return;
        }
        let local;
        switch (name) {
          case '1-1':
            local = {name: 'Home'};
            break;
          case '1-2':
            local = {name: 'Self'};
            break;
          case '1-3':
            local = {name: 'ArticleManage'};
            break;
          case '1-4-1':
            local = {name: 'SmallTag'};
            break;
          case '1-4-2':
            local = {name: 'RootLabel'};
            break;
          case '1-5-1':
            local = {name: 'ArticleDraft'};
            break;
          case '1-5-2':
            local = {name: 'ArticleEdit'};
            break;
          case '1-6':
            local = {name: 'CommentManage'};
            break;
          case '1-7':
            local = {name: 'Subject'};
            break;
          case '1-8':
            local = {name: 'DataBase'};
            break;
          case '1-9':
            local = {name: 'Setting'};
            break;
        }
        this.$router.push(local)
      },
      selectMenu(index) {
        this.currentMenuItem = index;
      },
      logout() {
        this.http.post("/logout", null, null, null);
        this.$router.push({name:'Login'});
      }
    }
  }
</script>
<style scoped>
  #app {
    height: 100%;
    width: 100%;
  }

  .header-bar-title {
    margin-top: 10px;
    margin-left: 2px;
    margin-right: 2px;
    margin-bottom: 5px;
  }

  .header-bar-my {
    display: inline;
    float: right;
    margin-right: 30px;
  }

  .header-bar-title img {
    max-width: 100%;
  }

  .layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }

  .layout-header-bar {
    background: #fff;
    display: inline;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  }

  .layout-logo-left {
    width: 90%;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    margin: 15px auto;
  }

  .menu-icon {
    transition: all .3s;
  }

  .rotate-icon {
    transform: rotate(-90deg);
  }

  .menu-item span {
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }

  .menu-item i {
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }

  .collapsed-menu span {
    width: 0px;
    transition: width .2s ease;
  }

  .collapsed-menu i {
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }

  /*动画*/
  .slide-fade {
    position: absolute;
    left: 0;
    right: 0;
  }

  .slide-fade-enter-active {
    transition: all 1.2s ease;
  }

  .slide-fade-leave-active {

    transition: all .1s cubic-bezier(2.0, 0.5, 0.8, 1.0);
  }

  .slide-fade-enter, .slide-fade-leave-to {
    left: 0;
    right: 0;
    transform: translateX(50px);
    opacity: 0;
  }
</style>

